<template>
	<view class="record-option">	
		<view>身高</view>
		<input class="input" placeholder="请输入身高" maxlength="10"/>
		<view>cm</view>		
	</view>
	<view class="record-option">
		<view>体重</view>
		<input class="input" placeholder="请输入体重" maxlength="10"/>
		<view>kg</view>
	</view>
	<view class="record-option">
		<view>日期</view>
		<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
								<view class="uni-input">{{date}}</view>
							</picker>
		<uni-icons type="right" size="24"></uni-icons>
	</view>
	<button type="default" class="save-btn">保存</button>
</template>

<script >
export default {
    data() {
        const currentDate = this.getDate({
            format: true
        })
        return {
            title: 'picker',
            array: ['中国', '美国', '巴西', '日本'],
            index: 0,
            date: currentDate,
            time: '12:01'
        }
    },
    computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
    methods: {
        bindPickerChange: function(e) {
            console.log('picker发送选择改变，携带值为', e.detail.value)
            this.index = e.detail.value
        },
        bindDateChange: function(e) {
            this.date = e.detail.value
        },
        bindTimeChange: function(e) {
            this.time = e.detail.value
        },
        getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        }
    }
}
</script>


<style scoped>
page{
	padding: 0 40rpx;
}
.record-option{
	display: flex;
	justify-content: space-between;
	border-bottom: 4rpx solid #f2f2f2;
	height: 100rpx;
	align-items:center;
}
.save-btn{
	margin-top:760rpx;
	color:#fff !important;
	background-color: #666ee8 !important;
	border-radius:100rpx;
}
.input{
	flex: 0.3;
}
.distance{
	
}

</style>
